import React from 'react';
import classNames from 'classnames';

/**
 * 文件上传进度条
 * 当file.state不是uploading和paused状态的时候不显示
 * @param {any} props 必须要有 listType 和 file 两个字段
 */
export default function FileProgress({ listType, file = {}, className }) {
    const { state = '', percent = 0 } = file;

    if (state !== 'uploading' && state !== 'paused') {
        return null;
    }

    return (
        <div className={classNames([
            'file-progress',
            { [`file-progress--${listType}`]: listType },
            className
        ])}>
            <div
                className={classNames([
                    'file-progress-bar',
                    { [`file-progress-bar--${listType}`]: listType }
                ])}
                style={{
                    width: `${percent}%`
                }}
            />
        </div>
    );
}
